<template>
	<view>
		<!-- <view class="u-p-32 u-font-lgm text-bold">{{newDetails.noticeTitle}}</view> -->

		<view class="card">
			<u-collapse @change="change" @close="close" @open="open" :accordion="true">
				<u-collapse-item :title="item.noticeTitle" :name="item.id" v-for="(item,index) in newList" :key="index">
					<!-- <text class="u-collapse-content"><view class="content" v-html="item.noticeContentHtml"></view></text> -->
					<view class="content" v-html="item.noticeContentHtml"></view>
				</u-collapse-item>
			</u-collapse>
		</view>

		<view class="tips"> 以上问题如果没有解决您的问题可以联系下面客服</view>
		<button open-type='contact' session-from='' hover-class='none'>
			<view class="flex align-center justify-center u-p-t-10 u-p-b-10">
				<u-icon name="server-man" color="#fff" size="60rpx"></u-icon>
				<view class="u-m-l-20 u-font-28" style="color: #fff;">在线客服</view>
			</view>
			<!-- <u-cell title="在线客服" :isLink="false">
				<view slot="icon" class="u-m-r-20">
					<u-icon name="/static/personal/cell-zxfw.png" size="44rpx"></u-icon>
				</view>
				<view slot="right-icon">
					<u-icon name="arrow-right" size="26rpx"></u-icon>
				</view>
			</u-cell> -->
			<!-- <u-icon name="/static/personal/cell-zxfw.png" size="44rpx"></u-icon> -->
		</button>
	</view>
</template>

<script>
	import {
		getNewsDetails,
		getNewsList
	} from "@/common/api/api.js"
	export default {
		data() {
			return {
				newDetails: '',
				id: '0561b31ab8024a2795fe2a66edd9b653',
				newList: []
			}
		},
		onLoad(options) {
			this.handleGetNewsList();
		},
		methods: {
			handleGetNewsList() {
				getNewsList({
					noticeType: 4,
					pageSize: 20
				}).then(res => {
					this.newList = res.data.list;
				})
			},
			handleGetNewsDetails(id) {
				getNewsDetails({
					id: id
				}).then(res => {
					this.newDetails = res.data;
				})
			},
			open(e) {
				///this.handleGetNewsDetails(e);
				console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
				console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
				console.log('change', e)
			}
		}
	}
</script>

<style>
	.card {
		padding: 8rpx;
		margin: 30rpx 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.content {
		color: #999;
		font-size: 28rpx;
		line-height: 45rpx;
	}

	button {
		width: 60%;
		padding: 0;
		margin:  32rpx auto;
		background-color: #FF5B00;
		text-align: left;
	}

	/* button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		text-align: left;
	}*/

	button::after {
		border: none;
	}

	.tips {
		margin-top: 80rpx;
		color: #999;
		text-align: center;
		font-size: 24rpx;
	}
</style>